import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/vpn_provider.dart';
import '../utils/formatters.dart';
import '../utils/theme.dart';
import '../l10n/app_localizations.dart';

class ConnectionCard extends StatelessWidget {
  const ConnectionCard({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    
    return Consumer<VpnProvider>(
      builder: (context, vpnProvider, _) {
        final isConnected = vpnProvider.status == VpnStatus.connected;
        final isConnecting = vpnProvider.status == VpnStatus.connecting;
        final server = vpnProvider.currentServer;
        final stats = vpnProvider.currentStats;
        final duration = vpnProvider.connectionDuration;

        return Card(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              children: [
                // Connection status indicator
                Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      colors: isConnected
                          ? [AppTheme.secondaryColor, AppTheme.secondaryColor.withOpacity(0.7)]
                          : [AppTheme.primaryColor, AppTheme.primaryColor.withOpacity(0.7)],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: isConnected
                            ? AppTheme.secondaryColor.withOpacity(0.3)
                            : AppTheme.primaryColor.withOpacity(0.3),
                        blurRadius: 20,
                        spreadRadius: 5,
                      ),
                    ],
                  ),
                  child: isConnecting
                      ? const CircularProgressIndicator(color: Colors.white)
                      : Icon(
                          isConnected ? Icons.vpn_lock : Icons.vpn_key_off,
                          size: 60,
                          color: Colors.white,
                        ),
                ),
                const SizedBox(height: 24),
                
                // Connection status text
                Text(
                  isConnected
                      ? l10n.connectionConnected
                      : isConnecting
                          ? l10n.connectionConnecting
                          : l10n.connectionDisconnected,
                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                ),
                
                if (server != null) ...[
                  const SizedBox(height: 8),
                  Text(
                    server.name,
                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                          color: Colors.grey,
                        ),
                  ),
                ],
                
                if (isConnected) ...[
                  const SizedBox(height: 8),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.access_time,
                        size: 16,
                        color: Colors.grey.shade600,
                      ),
                      const SizedBox(width: 4),
                      Text(
                        '${l10n.connectionDuration}: ${formatDuration(duration)}',
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                              color: Colors.grey.shade600,
                            ),
                      ),
                    ],
                  ),
                ],
                
                const SizedBox(height: 24),
                
                // Stats row
                if (isConnected && stats != null)
                  Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          _StatItem(
                            icon: Icons.arrow_upward,
                            label: l10n.trafficUpload,
                            value: formatSpeed(stats.uploadSpeed),
                            color: AppTheme.primaryColor,
                          ),
                          _StatItem(
                            icon: Icons.arrow_downward,
                            label: l10n.trafficDownload,
                            value: formatSpeed(stats.downloadSpeed),
                            color: AppTheme.secondaryColor,
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          _StatItem(
                            icon: Icons.cloud_upload_outlined,
                            label: '${l10n.trafficTotal} ${l10n.trafficUpload}',
                            value: formatBytes(stats.totalUpload),
                            color: Colors.blue,
                            iconSize: 24,
                          ),
                          _StatItem(
                            icon: Icons.cloud_download_outlined,
                            label: '${l10n.trafficTotal} ${l10n.trafficDownload}',
                            value: formatBytes(stats.totalDownload),
                            color: Colors.green,
                            iconSize: 24,
                          ),
                        ],
                      ),
                    ],
                  ),
                
                const SizedBox(height: 24),
                
                // Connect/Disconnect button
                SizedBox(
                  width: double.infinity,
                  height: 56,
                  child: ElevatedButton(
                    onPressed: isConnecting
                        ? null
                        : () async {
                            if (isConnected) {
                              await vpnProvider.disconnect();
                            } else {
                              // Show server selection or connect to last server
                              if (server != null) {
                                await vpnProvider.connect(server);
                              } else {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(
                                    content: Text('Please select a server first'),
                                  ),
                                );
                              }
                            }
                          },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: isConnected ? AppTheme.errorColor : AppTheme.primaryColor,
                    ),
                    child: Text(
                      isConnected ? l10n.btnDisconnect : l10n.btnConnect,
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class _StatItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final String value;
  final Color color;
  final double iconSize;

  const _StatItem({
    required this.icon,
    required this.label,
    required this.value,
    required this.color,
    this.iconSize = 32,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon, color: color, size: iconSize),
        const SizedBox(height: 8),
        Text(
          label,
          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                color: Colors.grey,
              ),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: Theme.of(context).textTheme.titleMedium?.copyWith(
                fontWeight: FontWeight.bold,
              ),
        ),
      ],
    );
  }
}
